<template>
  <div class="home">
    <div class="tu">
      <img src="../img/image 1.png" alt="" />
      <input type="text" />
      <h3>Cafe Town</h3>
      <input type="text" placeholder=" View detail" class="lu" />
      <i class="iconfont icon-share"></i>
    </div>
    <h3> Popular Destination</h3>
    <div class="img1">
   <img src="../img/Rectangle 10.png" alt="">
        <img src="../img/Rectangle 11.png" alt="">
    </div>
 
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss">
h3{
    padding: 25px 0;
}
.home {
  width: 100%;
  height: 100%;
  .tu {
    width: 100%;
    height: 550px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
    input {
      position: absolute;
      top: 30px;
      left: 20px;
      width: 85%;
      height: 35px;
      border-radius: 20px;
    }
    p {
      position: absolute;
      left: 15px;
      top: 5px;
      display: flex;
    }
    h3 {
      position: absolute;
      left: 25px;
      top: 377px;
      color: #fff;
      padding: 25px 0;
    }
    .lu {
      position: absolute;
      background: #00cec9;
      left: 20px;
      top: 465px;
      width: 45%;
      height: 35px;
      border-radius: 20px;
      border: none;
      color: #fff;
      text-align: center;
    }
    i{
     position: absolute;
      right: 25px;
      top: 350px;
      color: #fff;
      font-size: 35px;
    }
  }
  h3{
    margin: 10px 20px;
  }
.img1{
    width: 100%;
    height: 168px;
    display: flex;
    overflow: hidden;
    img{
    width: 70%;
    height: 168px;
    margin: 0 10px;
 
  }
}
}
</style>

